<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <title>元旦拆盲盒·拆出惊喜</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/element_ui/css/index.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 0.24rem;
        }

        body {
            background-color: #FFE8E8;
            position: relative;
            width: 7.5rem;
            margin: 0 auto;
        }

        .el-row {
            margin-bottom: 0.2rem;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .el-progress-bar__outer {
            background-color: #FFFFFF;
            width: 6.7rem;
        }

        .bg-purple-dark {
            background: #FFFFFF;
        }

        .grid-content {
            border-radius: 0.2rem;
            min-height: 0.9rem;
            padding: 0.2rem 0 0 0.5rem;
        }

        .top {
            position: absolute;
            top: 0;
            width: 7.5rem;
            height: 11.25rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .middle {
            position: relative;
            padding: 10.26rem 0.4rem 0.2rem;
        }

        .box {
            width: 5.7rem;
            height: 2.5rem;
            background-color: #FFFFFF;
            padding: 0.54rem 0.5rem;
            border-radius: 0.2rem;
        }

        .box_flex {
            width: 5.71rem;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .footer {
            margin-top: 1rem;
            height: 2.35rem;
            width: 7.5rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .btn {
            color: white;
            width: 6.7rem;
            height: 0.88rem;
            border-radius: 0.2rem;
            text-align: center;
            font-size: 0.4rem;
            line-height: 0.88rem;
            margin-top: 0.4rem;
        }

        .title_des {
            height: 0.4rem;
            margin-top: 0.83rem;
            margin-bottom: 0.4rem;
            background-repeat: no-repeat;
            background-size: contain;
            margin-left: 2rem;
        }

        .share_btn {
            margin-top: -0.55rem;
            margin-left: 5rem;
            border-radius: 0.2rem;
            width: 1rem;
            height: 0.5rem;
            text-align: center;
            color: #FFFFFF;
            line-height: 0.5rem;
        }

        .active_rule {
            width: 5.95rem;
            background-color: #FFFFFF;
            border-radius: 0.2rem;
            padding: 0.4rem;
        }

        .activ_rule {
            font-size: 0.22rem;
        }

        .active_text {
            color: #FF8FAC;
        }

        .mantle {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000000;
            opacity: 0.6;
            width: 100%;
            height: 100%;
        }

        .pop {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 5.91rem;
            height: 5.67rem;
        }

        .pop_img {
            height: 2.3rem;
            border-top-left-radius: 0.2rem;
            border-top-right-radius: 0.2rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .pop_txt {
            height: 3.37rem;
            background-color: #FFFFFF;
            border-bottom-right-radius: 0.2rem;
            border-bottom-left-radius: 0.2rem;
        }

        .pop_btn {
            background-color: #FF6C89;
            color: white;
            width: 3rem;
            height: 0.8rem;
            border-radius: 0.25rem;
            text-align: center;
            font-size: 0.32rem;
            line-height: 0.88rem;
            margin-top: 1rem;
            margin-left: 1.5rem;
        }

        [v-cloak] {
            display: none;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="top" v-bind:style="{backgroundImage: 'url(' + topImg + ')'}"></div>
    <div class="middle">
        <div class="box">
            <div style="width: 4.36rem;height: 0.25rem;margin-left: 0.6rem;background-image: url('https://oss.goddessxzns.com/active/web/images/shaungdan_txt1.png?v=1');background-repeat: no-repeat;background-size: contain;"></div>
            <div style="margin-top: 0.34rem">
                <div class="box_flex">
                    <div v-for="(item, index) in blind_box_info"
                         style="width: 1rem;height:1.38rem;background-repeat: no-repeat;background-size: contain;"
                         v-bind:style="{backgroundImage: 'url(' + boxImg + (index+1) + '.png)'}"></div>
                </div>
                <div class="box_flex">
                    <div v-for="(item, index) in blind_box_info" style="width: 1rem;height:0.33rem;margin-top: 0.2rem">{{item.name}}</div>
                </div>
            </div>
        </div>
        <br>
        <el-progress :percentage="percentage" status="exception" stroke-width="10"></el-progress>
        <p><span style="float: left">潜力值：{{percentage}}%</span><span style="float:right;">可抽取次数：{{num}}</span></p>
        <br>
        <div v-if="status == 1">
            <div class="btn" @click="openVn()" style="background-color: #EEEEEE">活动未开始</div>
        </div>
        <div v-else-if="status == 2">
            <div v-if="num > 0">
                <div class="btn" @click="openVn()" style="background-color: #FF6C89">点击抽取</div>
            </div>
            <div v-else>
                <div class="btn" style="background-color: #cccccc;color: #333333;">点击抽取</div>
            </div>
        </div>
        <div v-else>
            <div class="btn" @click="openVn()" style="background-color: #EEEEEE">活动已结束</div>
        </div>
        <br>
        <p style="text-align: center;font-size: 0.28rem;text-decoration:underline;color: blue" @click="luckyDraw()">抽奖记录</p>
        <div class="title_des"
             style="background-image: url('https://oss.goddessxzns.com/active/web/images/shaungdan_txt2.png')"></div>
        <el-row v-for="(item, index) in active_share_rule">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <h6 style="font-size: 0.3rem">{{item.title }}</h6>
                    <div v-if="index == 0">
                        <p style="color: #333333;white-space: pre-line;width: 5.2rem;font-size: 0.22rem">{{item.des}}</p>
                        <div v-if="status == 3">
                            <div class="share_btn" style="background-color: #EEEEEE;color: black">已结束</div>
                        </div>
                        <div v-else>
                            <div class="share_btn" style="background-color: #EEEEEE;color: black">{{item.btn_txt}}</div>
                        </div>
                    </div>
                    <div v-else>
                        <p style="color: #333333;white-space: pre-line;width: 5.2rem;font-size: 0.2rem">{{item.des}}（{{active_share_num[index]['num']}}/{{active_share_num[index]['max_num']}}）</p>
                        <div class="share_btn" style="background-color: #FF6C89" @click="shareOrBuy(index)">{{item.btn_txt}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="title_des"
             style="background-image: url('https://oss.goddessxzns.com/active/web/images/shaungdan_txt3.png')"></div>
        <div class="active_rule">
            <el-row>
                <el-col :span="24">
                    <P class="activ_rule">1.每日进入，可免费领取一次开启盲盒的机会。</P>
                    <br>
                    <P class="activ_rule">2.每日可分享微信好友，微博、QQ、朋友圈，可各获得一次开启盲盒机会。</P>
                    <br>
                    <P class="activ_rule">3.活动期内购买日运可获得开启盲盒次数，按购买日运天数计算，即<span class="active_text">购买1日日运=1次开启盲盒机会</span>，购买日运获得开启盲盒机会上限为15次。
                    </P>
                    <br>
                    <P class="activ_rule">4.活动期内购买月运可获得开启盲盒次数，按购买月运的时间计算，即<span class="active_text">购买1个月月运=5次开启盲盒机会</span>，购买月运所获得开启盲盒机会上限为15次。
                    </P>
                    <br>
                    <P class="activ_rule">5.活动期内购买年运可获得开启盲盒次数，按购买年运的时间计算，即<span class="active_text">购买1年年运=10次开启盲盒机会</span>，购买年运所获得开启盲盒机会上限为20次。
                    </P>
                    <br>
                    <P class="activ_rule">6.每次开启盲盒都能<span class="active_text">随机</span>获得潜力值，潜力值达到100%，则百分百可以获得<span class="active_text">装有免费券</span>的盲盒。
                    </P>
                    <br>
                    <P class="activ_rule">7.活动所获优惠券不可赠送。</P>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="mantle" v-show="pop_display"></div>
    <div class="pop" v-show="pop_display">
        <div class="pop_img" v-bind:style="{backgroundImage: 'url(' + popImg + ')'}">
        </div>
        <div class="pop_txt">
            <h3 style="padding-top: 0.6rem; text-align: center;white-space: pre-line;">{{coupon_des}}</h3>
            <div class="pop_btn" @click="receive(1)">{{coupon_btn}}</div>
        </div>
    </div>
    <div class="pop" v-show="pop_display2">
        <div class="pop_img" v-bind:style="{backgroundImage: 'url(' + popImg + ')'}">
        </div>
        <div class="pop_txt">
            <h3 style="padding-top: 0.6rem; text-align: center;white-space: pre-line;">{{coupon_des}}</h3>
            <div class="pop_btn" @click="receive(2)">{{coupon_btn}}</div>
        </div>
    </div>
    <div class="footer" v-bind:style="{backgroundImage: 'url(' + botImg + ')'}"></div>
    {include file="../apps/web/view/public/share.html" /}
</div>
</body>
<!-- import Vue before Element -->
<script type="text/javascript" src="/static/vue.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="/static/element_ui/js/index.js"></script>
<script type="text/javascript" src="/static/rem.js"></script>
<script type="text/javascript" src="/static/axios.js"></script>
<script type="text/javascript">
    var app_type = '{$app_type}'
    var version = '{$version}'
    /**
     * 简易tost层
     * @param msg
     * @param statusCode
     */
    function Toast(msg, statusCode) {
        var duration = isNaN(statusCode) ? 5000 : statusCode;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = "width:4.5rem;padding:0 14px;height: 1.48rem;color: rgb(255, 255, 255);line-height: 1.48rem;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 0.24rem;";
        document.body.appendChild(m);
        setTimeout(function () {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function () {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    }

    /**
     * 通用跳转
     * @param target string 跳转方式
     * @param link string 跳转地址
     * @param umeng_event_name string 友盟事件名
     * @param umeng_event_label string 友盟事件参数
     */
    function commonJsToNative(target, link, umeng_event_name, umeng_event_label) {
        console.log('target=' + target + ',link=' + link + ',umeng_event_name=' + umeng_event_name + ',umeng_event_label=' + umeng_event_label)
        umeng_event_name = typeof umeng_event_name === 'undefined' ? '' : umeng_event_name;
        umeng_event_label = typeof umeng_event_label === 'undefined' ? '' : umeng_event_label;
        if (umeng_event_name) {
            umeng_event_label += '-' + link
        }
        if (!target)
            return
        else if (target === 'link') {
            link = domain + link
        }


        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                if (version)
                    androidwebview.commonJsToNative(target, link, umeng_event_name, umeng_event_label)
                else
                    androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' === target) {
                    window.location.href = link
                }
        }
    }

    /**
     * commonJsToNativeShare(title,desc,**url,platform[0：微信；1：微信朋友圈；2：微博；3：qq；4：qq空间]);【注意：banner 跳转的webview 和 服务消息里跳转的webview  要实现的js调用本地分享的方法】
     * @param title
     * @param desc
     * @param url
     * @param platform
     * @param umeng_event_name
     * @param umeng_event_label
     */
    function commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label) {

        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNativeShare.postMessage({
                    'title': title,
                    'desc': desc,
                    'url': url,
                    'platform': platform,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                androidwebview.commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label)
                break;
            default:
                console.log('not ios or android')
        }
    }

    /**
     * vue控制
     */
    new Vue({
        el: '#app',
        data: function () {
            return {
                status: parseInt('{$status}'),
                // 能力值
                percentage: '{$user_prize_info.potential}',
                active_share_num: JSON.parse('{$share_type_info}'),
                active_share_rule: [
                    {title: '进入活动', des: '每日首次进入活动可免费获得一次抽奖机会', btn_txt: '已完成'},
                    {title: '微信邀请', des: '每日邀请微信好友可获抽奖机会', btn_txt: '去邀请'},
                    {title: '朋友圈分享', des: '每日分享至朋友圈可获抽奖机会', btn_txt: '去分享'},
                    {title: '微博分享', des: '每日分享至微博可获抽奖机会', btn_txt: '去分享'},
                    {title: 'QQ分享', des: '每日分享至QQ可获抽奖机会', btn_txt: '去分享'},
                    {title: '购买日运', des: '活动期内购买日运可获得抽奖机会', btn_txt: '去购买'},
                    {title: '购买月运', des: '活动期内购买月运可获得抽奖机会', btn_txt: '去购买'},
                    {title: '购买年运', des: '活动期内购买年运可获得抽奖机会', btn_txt: '去购买'},
                ],
                blind_box_info: [{type: 1, name: '风象盲盒'}, {type: 2, name: '火象盲盒'}, {type: 3, name: '水象盲盒'}, {type: 4, name: '土象盲盒'}],
                pop_display: false,
                pop_display2: false,
                share_box_show: false,
                coupon_des: '',
                coupon_btn: '确定',
                // 可抽奖次数
                num: parseInt('{$user_prize_info.prize_unsuc_num}'),
                topImg: '{$oss}active/web/images/shaungdan2020_top.png?v=1',
                botImg: '{$oss}active/web/images/shaungdan_bot.png',
                popImg: '{$oss}active/web/images/shaungdan2020_pop2.png',
                popImg2: '{$oss}active/web/images/shaungdan2020_pop1.png',
                boxImg: '{$oss}active/web/images/shugndan_box',
                oss: '{$oss}'
            }
        },
        mounted: function () {
            document.addEventListener('visibilitychange', this.handleVisiable)
        },
        methods: {
            openVn: function () {
                var that = this;
                if (that.num < 1) {
                    Toast('抽奖次数已无');
                }
                that.num = 0;
                that.coupon_btn = '确定';

                //获取剩余抽奖次数，总潜力值，优惠券信息，tost信息
                axios.get('{$domain}/webactive/active/luckyDraw',
                    {
                        headers: JSON.parse('{$headers}'),
                        params: {active_id: '{$active_id}'}
                    }
                ).then(function (res) {
                    var code = res.data['code'];
                    var data = res.data['data'];
                    var msg = res.data['msg'];
                    if (code == 200) {
                        that.percentage = data['potential']; //潜力值
                        that.num = data['prize_unsuc_num']; //剩余抽奖次数
                        //获取当前抽取的优惠券信息
                        that.coupon_des = msg;
                        that.pop_display = true; //中奖信息弹窗
                    } else {
                        Toast(msg);
                    }
                }).catch(function (error) {
                    Toast(error);
                });
            },
            //打开分享页
            shareOrBuy: function (key) {
                var share = [1, 2, 3, 4];

                if (share.indexOf(key) !== -1) {
                    this.share_box_show = true;
                }
                var arr = [5, 6, 7];
                //跳转app购买商品
                if (arr.indexOf(key) !== -1) {
                    var link;
                    switch (key) {
                        case 5:
                            link = 'day';
                            break;
                        case 6:
                            link = 'fortune_for_month';
                            break;
                        case 7:
                            link = 'fortune_for_year';
                            break;
                        default:
                            link = '';
                            break;
                    }
                    commonJsToNative('local', link);
                }
            },
            //开始分享
            toShareStart: function (shareIndex) {
                var that = this;
                commonJsToNativeShare('{$shareTitle}', '{$description}', '{$domain}/webactive/active/shareindex?active_id={$active_id}&zhunleshare=1', shareIndex, 'common_js_to_native', '分享-双旦活动')
                setTimeout(function () {
                    if (shareIndex === 4) {
                        shareIndex = 3;
                    }
                    //告诉服务器分享成功，增加抽奖次数
                    axios.get('{$domain}/webactive/active/task',
                        {
                            headers: JSON.parse('{$headers}'),
                            params: {
                                task_id: shareIndex + 2,
                                active_id: '{$active_id}'
                            }
                        }
                    ).then(function (res) {
                        var code = res.data['code'];
                        var data = res.data['data'];
                        var msg = res.data['msg'];
                        if (code * 1 === 200) {
                            that.share_box_show = false;
                            // $('.share-box').hide();
                            if (data['inc'] > 0) {
                                that.pop_display = true; //中奖信息弹窗
                                that.popImg = that.popImg2; //分享信息弹窗
                                that.coupon_des = '分享成功，抽奖次数+1';
                                that.coupon_btn = '去抽奖';
                                that.num += 1;
                                switch (shareIndex) {
                                    case 0:
                                        that.active_share_num[1]['num'] += (data['inc'] * 1);
                                        break;
                                    case 1:
                                        that.active_share_num[2]['num'] += (data['inc'] * 1);
                                        break;
                                    case 2:
                                        that.active_share_num[3]['num'] += (data['inc'] * 1);
                                        break;
                                    case 3:
                                    case 4:
                                        that.active_share_num[4]['num'] += (data['inc'] * 1);
                                        break;
                                }
                            }
                        } else {
                            Toast(msg);
                        }
                    }).catch(function (error) {
                        Toast(error);
                    });
                }, 1500)
            },
            //抽奖记录
            luckyDraw: function () {
                window.location.href = '{$domain}/webactive/active/prizerecords?active_id={$active_id}&headers={$headers_urlencode}';
            },
            //领取优惠券
            receive: function (type) {
                if (type == 1 && this.percentage == 100) {
                    this.pop_display2 = true;
                    this.popImg = this.popImg2;
                    this.coupon_des = '潜力值已满，抽奖次数+1';
                    this.coupon_btn = '去抽奖';
                } else {
                    this.pop_display = false;
                    this.pop_display2 = false;
                }
            },
            handleVisiable:function (e) {
                var that = this;
                if (e.target.visibilityState === 'visible') {
                    //获取剩余抽奖次数，总潜力值，优惠券信息，tost信息
                    axios.get('{$domain}/webactive/active/getPrizeInfo',
                        {
                            headers: {$headers},
                            params: {active_id: '{$active_id}'}
                        }
                    ).then(function (res) {
                        var code = res.data['code'];
                        var data = res.data['data'];
                        if (code == 200) {
                            that.percentage = data.potential;
                            that.num = data.prize_unsuc_num;
                            that.status = data.status;
                            that.active_share_num = JSON.parse(data.share_type_info);
                        }
                    })
                }
            },
        }
    })

    //友盟打点
    var SITE_ID = '1279561669'
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=' + SITE_ID + '&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);

</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
